<template>
	<div>
		<div class="leftContent">
			<el-scrollbar :max-height="maxHeight">
				<box class="mb-3" :wvalueth="480" :title="'数据管理'">
					<div class="mb-1">
						<p class="font-lan-gray-60">地图管理：</p>
						<el-row :gutter="16">
							<el-col :span="12">
								<coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
							</el-col>
							<el-col :span="12">
								<maptype />
							</el-col>
						</el-row>
					</div>
					<div class="mb-1">
						<p class="font-lan-gray-60">数据来源：</p>
						<scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
							:value="'id'" />
					</div>
					<div>
						<p class="font-lan-gray-60">数据范围：</p>
						<scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'"
							:value="'id'" @change="acscaderChange" />
					</div>
				</box>
				<box v-if="data.isShow" class="mb-3" :width="480" :title="'气象监测'">
					<el-row class="mb-2" :gutter="16">
						<el-col :span="8" v-for="(item,index) in data.weather.list" :key="index">
							<div class="d-flex ai-center">
								<img :src="item.pic" alt="" class="mr-2 weatherImg">
								<div>
									<p class="font-lan-gray-60-s">{{item.name + ' (' + item.unit + ')'}}</p>
									<p class="font-num-m">{{item.value}}</p>
								</div>
							</div>
						</el-col>
					</el-row>
					<el-scrollbar ref="scrollContainer" @wheel.prevent="handleScroll">
						<div class="d-flex mb-3 p-1">
							<div :class="['tag', 'mr-3', 'pointer', active == index ? 'active' : '']"
								v-for="(item, index) in data.weather.data" :key="index" @click="tagsChange(item, index)">
								<p :class="['font-lan', 'white-nowrap', active == index ? 'text-shadow' : 'font-lan-gray-60']">{{ item.attribute
								}}</p>
							</div>
						</div>
					</el-scrollbar>
					<lineChartC :data="{ list: data.weather.data.length>0?data.weather.data[active].value:[], legend: [], unit: data.weather.data.length>0?data.weather.data[active].value[0].unit:'' ,color:'rgba(50, 216, 205, 1)',background:'rgba(50, 216, 205, 0.2)'}" />
				</box>
				<box v-if="data.isShow" :width="480" :title="'土壤墒情监测'">
					<el-scrollbar ref="scrollContainer1" @wheel.prevent="handleScroll1">
						<div class="d-flex mb-3 p-1">
							<div :class="['tag', 'mr-3', 'pointer', active1 == index ? 'active' : '']" v-for="(item, index) in data.soil.data"
								:key="index" @click="tagsChange1(item, index)">
								<p :class="['font-lan', 'white-nowrap', active1 == index ? 'text-shadow' : 'font-lan-gray-60']">{{ item.attribute
								}}</p>
							</div>
						</div>
					</el-scrollbar>
					<lineChartC :data="{ list: data.soil.data.length>0?data.soil.data[active1].value:[], legend: [], unit: data.soil.data.length>0?data.soil.data[active1].value[0].unit:'' ,color:'rgba(245, 114, 49, 1)',background:'rgba(245, 114, 49, 0.2)'}" />
				</box>
			</el-scrollbar>
		</div>
		<div class="rightContent">
			<el-scrollbar :max-height="maxHeight">
				<box v-if="data.isShow" class="mb-3" :width="480" :title="'孢子监测'">
					<el-scrollbar :max-height="300" :min-height="200">
						<div class="deviceCard" v-for="(item, index) in data.spore" :key="index">
							<el-row :gutter="16">
								<el-col :span="12">
									<span class="font-lan-gray-60-m">设备名称：</span>
									<span class="font-lan-m">{{ item.name }}</span>
								</el-col>
								<el-col :span="12">
									<span class="font-lan-gray-60-m">设备编号：</span>
									<span class="font-lan-m">{{ item.code?item.code:'暂无数据' }}</span>
								</el-col>
								<el-col :span="12">
									<span class="font-lan-gray-60-m">设备状态：</span>
									<span class="font-lan-m">{{ item.status }}</span>
								</el-col>
								<el-col :span="12">
									<span class="font-lan-gray-60-m">上报时间：</span>
									<span class="font-lan-m">{{ item.updateTime }}</span>
								</el-col>
								<el-col :span="24">
									<div class="d-flex ai-center jc-between mb-2">
										<div>
											<span class="font-lan-gray-60-m">设备位置：</span>
											<span class="font-lan-m">{{ item.cityName + item.townName + item.villageName }}</span>
										</div>
										<div class="deviceButton d-flex ai-center pointer" @click="item.showImg = !item.showImg">
											<p class="font-lan-s">查看图片</p>
											<img :class="[item.showImg ? 'rotate' : '']" :src="unfold" alt="">
										</div>
									</div>
									<div class="d-flex" v-if="!item.showImg">
										<img class="mr-2 deviceImg" v-for="(item1, index1) in item.imgs" :key="index1" :src="item1" alt="">
									</div>
								</el-col>
							</el-row>
						</div>
					</el-scrollbar>
				</box>
				<box v-if="data.isShow" class="mb-3" :width="480" :title="'视频监测'">

				</box>
				<box v-if="data.isShow" :width="480" :title="'虫情监测'">
					<el-scrollbar :max-height="300" :min-height="200">
						<div class="deviceCard" v-for="(item, index) in data.worm" :key="index">
							<el-row :gutter="16">
								<el-col :span="12">
									<span class="font-lan-gray-60-m">设备名称：</span>
									<span class="font-lan-m">{{ item.name }}</span>
								</el-col>
								<el-col :span="12">
									<span class="font-lan-gray-60-m">设备编号：</span>
									<span class="font-lan-m">{{ item.code?item.code:'暂无数据' }}</span>
								</el-col>
								<el-col :span="12">
									<span class="font-lan-gray-60-m">设备状态：</span>
									<span class="font-lan-m">{{ item.status }}</span>
								</el-col>
								<el-col :span="12">
									<span class="font-lan-gray-60-m">上报时间：</span>
									<span class="font-lan-m">{{ item.updateTime }}</span>
								</el-col>
								<el-col :span="24">
									<div class="d-flex ai-center jc-between mb-2">
										<div>
											<span class="font-lan-gray-60-m">设备位置：</span>
											<span class="font-lan-m">{{ item.cityName + item.townName + item.villageName }}</span>
										</div>
										<div class="deviceButton d-flex ai-center pointer" @click="item.showImg = !item.showImg">
											<p class="font-lan-s">查看图片</p>
											<img :class="[item.showImg ? 'rotate' : '']" :src="unfold" alt="">
										</div>
									</div>
									<div class="d-flex" v-if="!item.showImg">
										<img class="mr-2 deviceImg" v-for="(item1, index1) in item.imgs" :key="index1" :src="item1" alt="">
									</div>
								</el-col>
							</el-row>
						</div>
					</el-scrollbar>
				</box>
			</el-scrollbar>
		</div>
	</div>
</template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import { getCropColor, calculateCenter } from "@/utils/common";
import bus from '@/utils/bus'
import lineChartC from "@/chart/lineChart/line-curve";
import mapControler from "@/components/mapContainer/mapControler";
import {
} from "@/public/request/http";
import moment from "moment";
import storage from '@/store'
import { useRouter } from 'vue-router';
export default defineComponent({
	components: {
		lineChartC
	},
	setup() {
		//变量
		// const maxHeight = ref(window.innerHeight-160+'px')
		const maxHeight = computed(() => window.innerHeight - 160 + 'px')
		const router = useRouter()
		const data: any = reactive({
			coverage: [],
			select: null,
			pullDatas: [],
			pullData: [],
			cascader: [],
			adress: [],
			pointList: [],
			farmlands: [],
			weathers: [{ name: '温度', value: 0 }, { name: '湿度', value: 0 }, { name: '降雨量', value: 0 }, { name: '光照', value: 0 }, { name: '辐射量', value: 0 }, { name: '风速', value: 0 }],
			// spore: [{ name: '孢子001', id: '123456', status: 0, time: '2023.11.13 12:00:00', address: '新疆自治区博州博乐市', imgs: [require("@/assets/img/area.png")] }],
			weather:{},
			soil:{

			},
			spore:[{}],
			video: [],
			worm: [{}],
			isShow:false,
		});
		const tableData = ref([]);
		const searchData: any = reactive({
			personConfirmation: null,
			district: [],
			option1: 1,
			option2: 1,
		});
		const unfold = require("@/assets/img/unfold.png");
		const area = require("@/assets/img/area.png");
		const decorate2 = require("@/assets/img/decorate2.png");
		const soillocation = require("@/assets/img/soillocation.png")
		const active = ref(0)
		const active1 = ref(0)
		const scrollWrapper = computed(() => {
			return scrollContainer.value.wrapRef ? scrollContainer.value.wrapRef : scrollContainer.value.wrap$;
		});
		const scrollContainer = ref();
		const scrollWrapper1 = computed(() => {
			return scrollContainer.value.wrapRef ? scrollContainer.value.wrapRef : scrollContainer.value.wrap$;
		});
		const scrollContainer1 = ref();
		// 生命周期
		onMounted(async () => {
			data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
			await mapControler.mapReSet();
			mapControler.addDeviceMenu()
		});

		onUnmounted(() => {
			//
			mapControler.mapReSet();
			mapControler.clearContextMenus()
			bus.off('nearestDevice',nearestDevice)
		});

		//methods

		const tagsChange = (item, index) => {
			active.value = index
		}

		const tagsChange1 = (item, index) => {
			active1.value = index
		}

		const slecetChange = (e) => {
			console.log(e);

		}

		const acscaderChange = (e) => {
			console.log(data.cascader);
		}

		const handleScroll = (e: any) => {
			const eventDelta = e.wheelDelta || -e.deltaY * 20;
			const $scrollWrapper = scrollWrapper.value;
			$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - eventDelta / 2;
		};

		const handleScroll1 = (e: any) => {
			const eventDelta = e.wheelDelta || -e.deltaY * 20;
			const $scrollWrapper1 = scrollWrapper1.value;
			$scrollWrapper1.scrollLeft = $scrollWrapper1.scrollLeft - eventDelta / 2;
		};

		const nearestDevice = (val)=>{
			active.value = 0
			active1.value = 0
			mapControler.mapReSet();
			val.forEach(item=>{
				setData(item)
				item.devieceType = 'device'
				item.mapPop = getType(item.type).mapPop
				mapControler.drawMark(item.lon,item.lat,getType(item.type).icon,item)
			})
			data.isShow = true
    }
    bus.on('nearestDevice',nearestDevice)

		const setData = (val) => {
			switch (val.type) {
        case 0:
          
          break;
        case 1:
          // data.video = val;
          break;
        case 2:
					data.weather = val;
					data.weather.list = data.weather.data.map(item=>{
						return {
							name:item.attribute,
							value:item.value[0].dataValue,
							unit:item.value[0].unit,
							pic:getImg(item.attribute)
						}
					})
          break;
        case 3:
					data.worm = [val];
          break;
        case 4:
					data.soil = val;
          break;
        default:
          data.spore = [val];
          break;
      }
		}

		const getImg = (val)=>{
			let img = ''
			switch (val) {
        case '光照':
					img = require("@/assets/img/illumination.png")
          break;
        case '降雨':
					img = require("@/assets/img/rain.png")
          break;
        case '风向':
					img = require("@/assets/img/windDir.png")
          break;
        case '风速':
					img = require("@/assets/img/wind.png")
          break;
        case '湿度':
					img = require("@/assets/img/humidity.png")
          break;
        default:
          img = require("@/assets/img/temperature.png")
          break;
      }
			return img
		}

		const getType = (val)=>{
      let obj = {
        name: '',
        background: '',
        icon:'',
        mapPop:''
      }
      switch (val) {
        case 0:
          obj.name = '水肥一体机';
          obj.background = 'rgba(147, 245, 225, 1)';
          obj.icon = require('@/assets/img/deviceIcon_0.png');
          obj.mapPop = 'popWindows1';
          break;
        case 1:
          obj.name = '监控设备';
          obj.background = 'rgba(147, 170, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_1.png');
          obj.mapPop = 'popWindows2';
          break;
        case 2:
          obj.name = '气象站';
          obj.background = 'rgba(147, 219, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_2.png');
          obj.mapPop = 'popWindows3';
          break;
        case 3:
          obj.name = '虫情仪';
          obj.background = 'rgba(245, 186, 147, 1)';
          obj.icon = require('@/assets/img/deviceIcon_3.png');
          obj.mapPop = 'popWindows4';
          break;
        case 4:
        obj.name = '土壤墒情仪';
          obj.background = 'rgba(245, 225, 147, 1)';
          obj.icon = require('@/assets/img/deviceIcon_4.png');
          obj.mapPop = 'popWindows5';
          break;
        default:
          obj.name = '孢子仪';
          obj.background = 'rgba(192, 147, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_5.png');
          obj.mapPop = 'popWindows6';
          break;
      }
      return obj
    }

		// return
		return {
			data,
			area,
			decorate2,
			unfold,
			tableData,
			searchData,
			slecetChange,
			acscaderChange,
			moment,
			maxHeight,
			moveTo,
			soillocation,
			active,
			active1,
			tagsChange,
			tagsChange1,
			storage,
			scrollContainer,
			handleScroll,
			scrollContainer1,
			handleScroll1
		};
	},
});
</script>
  
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.chartIcon {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: #93F5E1;
	border-radius: 2px 2px 2px 2px;
}

.tag {
	padding: 0 10px;
	background: linear-gradient(90deg, rgba(82, 147, 204, 0.3) 0%, #5293CC 47%, rgba(82, 147, 204, 0.3) 100%);
	box-shadow: inset 0px 0px 8px 0px rgba(255, 255, 255, 0.16);
	border-radius: 2px 2px 2px 2px;
	opacity: 1;
	border: 1px solid;
	border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 0.3), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0.3)) 1 1;

	.name {
		white-space: nowrap;
	}
}
.weatherImg{
	width: 32px;
	height:32px
}

.active {
	position: relative;
	background: linear-gradient(351deg, #CCA352 0%, #F5D493 100%);
	border-radius: 2px 2px 2px 2px;
	border-image: linear-gradient(270deg, rgba(245, 212, 147, 1), rgba(255, 235, 153, 1)) 1 1;
}

.active::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	top: -4px;
	left: -4px;
	background: rgba(245, 196, 98, 0.6);
}

.active::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	right: -4px;
	bottom: -4px;
	background: rgba(245, 196, 98, 0.6);
}

.text-shadow {
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}

.deviceCard {
	background: rgba(31, 96, 153, 0.3);
	border-radius: 8px 8px 8px 8px;
	padding: 8px;
}

.deviceButton {
	background: rgba(4, 56, 102, 0.6);
	box-shadow: inset 0px 0px 8px 0px rgba(49, 153, 245, 0.6);
	border-radius: 12px 12px 12px 12px;
	opacity: 1;
	border: 1px solid rgba(229, 243, 255, 0.6);
	padding: 2px 8px;
}

.deviceImg {
	width: 128px;
	height: 72px;
}

.rotate {
	transform: rotate(180deg);
}</style>
  